<template>
  <div class="box">
    <el-steps align-center>
      <el-step title="填写商品信息" />
      <el-step title="填写商品促销" />
      <el-step title="填写商品属性" />
      <el-step title="选择商品关联" />
    </el-steps>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm"
      :size="formSize" status-icon>
      <el-form-item label="商品分类" prop="productCategoryId">
        <el-select v-model="ruleForm.productCategoryId" placeholder="请选择">
          <el-option v-for="item in state.rollList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="name" label="商品名称">
        <el-input v-model="ruleForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="subTitle" label="副标题">
        <el-input v-model="ruleForm.subTitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品品牌" prop="brandId">
        <el-select v-model="ruleForm.brandId" placeholder="请选择品牌">
          <el-option v-for="item in state.attribute" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="publishStatus" label="商品介绍">
        <el-input v-model="ruleForm.publishStatus" autocomplete="off" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item prop="aritcle" label="商品货号">
        <el-input v-model="ruleForm.aritcle" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="orginalPrice" label="商品售价">
        <el-input v-model="ruleForm.originalPrice" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="promotionPrice" label="市场价">
        <el-input v-model="ruleForm.promotionPrice" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="stock" label="商品库存">
        <el-input v-model="ruleForm.stock" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="unit" label="计量单位">
        <el-input v-model="ruleForm.unit" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="weight" label="商品重量">
        <el-input v-model="ruleForm.weight" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="sort" label="排序">
        <el-input v-model="ruleForm.sort" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-row class="mb-4">
      <el-button type="primary">下一步,填写商品促销</el-button>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { user } from "@/api";

interface IState {
  ruleForm: ICreates;
  rollList: any[],
  attribute: any[];
  list: Iwitchildren,
  listParams: Ibrand
}
const state = reactive<IState>({
  ruleForm: {
    productCategoryId: "",
    name: "",
    brandId: "",
    sort: 0,
    stock: 0,
    subTitle: "",
    unit: "",
    publishStatus: "",
    weight: 0,
    aritcle: "",
    originalPrice: 0,
    promotionPrice: 0,
  },
  list: {
    children: [],
    description: "",
    icon: "",
    id: 0,
    keywords: "",
    level: 0,
    name: "",
    navStatus: 0,
    parentId: 0,
    productCount: 0,
    productUnit: "",
    showStatus: 0,
    sort: 0,
  },
  rollList: [],
  attribute: [],
  listParams: {
    list: [],
    pageNum: 1,
    pageSize: 100,
    total: 0,
    totalPage: 0,
  },
});

// 请求商品分类的所有
user.withChildrenApi().then((res) => {
  if (res.code === 200) {
    state.rollList = res.data.map((item) => {
      return {
        value: item.id,

        label: item.name,
      };
    })
  }
})
// 请求商品品牌的所有
user.brandListAPi(state.listParams).then((res) => {
  if (res.code === 200) {
    console.log(res.data
    );

    state.attribute = res.data.list.map((item) => {
      return {
        value: item.id,

        label: item.name,
      };
    });
  }
})

let { ruleForm, list, listParams } = toRefs(state);

const formSize = ref("default");

const ruleFormRef = ref<FormInstance>();
//  表单效验
const rules = reactive<FormRules>({
  name: [
    { required: true, message: "请输入商品名称", trigger: "blur" },
    { min: 2, max: 140, message: "长度在2到140个字符", trigger: "blur" },
  ],
  subTitle: [
    { required: true, message: "请输入商品富标题", trigger: "blur" },
  ],
  brandId: [
    { required: true, message: "请选择商品品牌", trigger: "blur" },
  ],
  productCategoryId: [
    { required: true, message: "请选择商品内容", trigger: "blur" },
  ]
});



</script>
<style lang="less" scoped>
.box_breadcrumb {
  width: 100%;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.box {
  width: 800px;
  padding-top: 50px;
  margin: 50px auto;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
}

.el-form {
  margin-right: 100px;
  margin-top: 50px;
}

.el-button {
  margin: auto;
}
</style>